<!-- 等级评价机构详情 -->
<!-- 考试培训详情 -->
<!-- 课程支付 -->
<template>
	<view class="study-container">
		<view class="user-card-container">
			<!-- 主卡片 -->
			<view class="user-card">
				<!-- 用户信息 -->
				<!-- 课程名称 -->
				<view class="course-list">
					<view class="course-item" v-for="(course, index) in courseList" :key="index">
						<view class="course-left">
							<u-image :src="course.cover" width="220rpx" height="240rpx" mode="aspectFill" radius="4"></u-image>
						</view>
						<view class="course-right">
							<text class="course-name">{{ course.name }}</text>
							<text class="course-level">{{ course.content }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 分隔线 -->
		<u-line color="#b1b1b1" margin="30rpx 0"></u-line>
		
		<!-- 机构详情详单和图片 -->
		<view class="teacher-explain">
			<view class="teacher-img">
				<u-image v-if="courseInfo.introImage" :src="courseInfo.introImage" width="100%" height="300rpx"
					mode="widthFix" radius="8" class="teacher-image"></u-image>
			</view>
			<view class="teacher-content">
				<text class="teacher-text">{{ courseInfo.introduction }}</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				courseList: [{
						id: 1,
						cover: '/static/course1.jpg',
						name: '机构名称',
						content: '一级、二级、三级、四级、机构二三四五',
					}
				],
				currentTab: 0,
				tabs: [{
						name: '介绍'
					},
					{
						name: '优惠政策'
					}
				],
				stats: [{
						value: 24,
						label: '积分'
					},
					{
						value: 15,
						label: '粉丝'
					},
					{
						value: 8,
						label: '关注'
					},
					{
						value: 10,
						label: '消息'
					}
				],
				teachers: [{
						cover: '/static/course1.jpg',
						name: '张老师',
						title: '高级前端工程师',
						experience: 8,
						rating: 3.4,
						skills: ['前端架构', '性能优化', 'Vue.js', 'React.js']
					},
					{
						cover: '/static/course1.jpg',
						name: '李老师',
						title: '全栈工程师',
						experience: 5,
						rating: 3.4,
						skills: ['Node.js', 'TypeScript', '前端工程化']
					},
					{
						cover: '/static/course1.jpg',
						name: '王老师',
						title: 'UI设计师',
						experience: 6,
						rating: 4.2,
						skills: ['UI设计', '交互设计', '用户体验']
					}
				],
				courseInfo: {
					introduction: '图文介绍文章图文介绍文章图文介绍文章图文介绍文章图文介绍图文介绍文章图文介绍文章图文介绍文章图文介绍文章图文',
					introImage: '/static/course-intro.jpg',
					price: '10.8'
				},
				customStyle: {
					backgroundColor: "#D5D5D5"
				},
				// 讲师介绍
				// 实际开发中这里应该是从API获取的数据
				chapters: [{
						id: 1,
						name: "章节名称 (5)",
						status: "completed",
						lessons: [{
							name: "第一课 基础入门",
							duration: "30分钟22秒",
							status: "completed"
						}]
					},
					{
						id: 2,
						name: "章节名称 (5)",
						status: "unlocked",
						lessons: [{
							name: "第二课 进阶知识",
							duration: "30分钟22秒",
							status: "unlocked"
						}]
					},
					{
						id: 3,
						name: "章节名称 (5)",
						status: "in-progress",
						lessons: [{
							name: "第三课 实战演练",
							duration: "30分钟22秒",
							status: "in-progress",
							progress: 10
						}]
					},
					{
						id: 4,
						name: "章节名称 (5)",
						status: "locked",
						lessons: [{
							name: "第四课 高级技巧",
							duration: "30分钟22秒",
							status: "locked"
						}]
					}
				]
			}
		},
		methods: {
			changeTab(index) {
				this.currentTab = index;
			},
			// 团队报名
			teamRegister() {
				uni.navigateTo({
					url: `/pages/examTrain/teamRegister`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.study-container {
		background-color: #ffffff;
	}


	// 课程名称
	.course-list {
		border-radius: 8rpx;
		overflow: hidden;
	}

	.course-item {
		display: flex;
		padding: 20rpx;
		// border-bottom: 1rpx solid #eee;
	}

	.course-left {
		margin-right: 20rpx;
	}

	.course-right {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.course-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #000000;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.course-level {
		font-size: 24rpx;
		color: #000000;
		margin-bottom: 8rpx;
	}


	.teacher-explain {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 24rpx;

		.teacher-content {
			font-size: 32rpx;
			margin-top: 10px;
		}
	}
</style>